<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .container {
            height: 100vh;
            width: 100vh;
            border-radius: 50%;
            border: 1px solid black;
            position: relative;
            transition: transform 2s ease;
        }
        .name {
            font-size: 32px;
            font-weight: 900;
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .name.active {
            color: blue;
        }
        .name.visited {
            color: yellowgreen;
        }
        .pointer {
            height: 3px;
            width: 30vh;
            background: black;
            position: absolute;
            left: 50vh;
            top: 50vh;
            transform-origin: left;
        }
        .split-line {
            height: 50px;
            width: 1px;
            background: black;
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
</head>
<body>
    
    <div class="container"></div>
    <div class="pointer"></div>
    <button>开始</button>

    <script>
        
        const nameList = [
            'zhangsan',
            'lisi',
            'wangmazi',
            'zhaosi',
            'liuneng',
        ];

        // cssSelector: css选择器
        function q (cssSelector) {
            return document.querySelector(cssSelector);
        }
        // cssSelector: css选择器
        function qa (cssSelector) {
            return document.querySelectorAll(cssSelector);
        }

        // 封装生成元素的函数
        // tagName: 标签名
        function create (tagName) {
            return document.createElement(tagName);
        }

        const container = q('.container');
        const btn = q('button');
        const pointer = q('.pointer');

        pointer.setAttribute('style', `transform: rotate(${ -(90 + 180 / nameList.length) }deg)`);

        // 50vh在js里怎么表示
        const r = window.innerHeight * .5;

        // 动态创建所有名字
        function createNameList () {
            for (let i = 0; i < nameList.length; i++) {
                const name = nameList[i];
                const angle = i * 360 / nameList.length;
                // 制作名字
                const div = create('div');
                div.setAttribute('class', 'name');
                div.setAttribute('style', `transform: 
                    translate(-50%, -50%) 
                    rotate(${ angle }deg) 
                    translateY(calc(50px - 50vh));
                `);
                div.innerText = name;
                container.appendChild(div);
                // 制作分割线
                const splitLine = create('div');
                splitLine.setAttribute('class', 'split-line');
                splitLine.setAttribute('style', `transform:
                    translate(-50%, -50%)
                    rotate(${ angle - 180 / nameList.length }deg) 
                    translateY(calc(25px - 50vh));
                `);
                container.appendChild(splitLine);
            }
        }

        const record = [];
        let angle = 0;
        // 旋转逻辑
        function run () {
            angle += Math.random() * 360;
            const fr = 360 / nameList.length;
            const currentIdx = Math.floor(angle / fr) % nameList.length;
            // str.includes('a') 
            // arr.includes(item)
            // 保证随机过的人不会被随机到
            if (record.length === nameList.length) {
                alert('没了');
                return;
            }
            if (record.includes(currentIdx)) {
                run();
                alert('随机过了');
                return;
            }
            // 把随机过的变黄
            const nameBoxes = qa('.name');
            for (const idx of record) {
                nameBoxes[idx].setAttribute('class', 'name visited');
            }
            record.push(currentIdx);
            // 2秒后高亮当前选中的人
            setTimeout(function () {
                nameBoxes[currentIdx].setAttribute('class', 'name active');
            }, 2000);
            // 旋转大转盘
            container.setAttribute('style', `transform: rotate(${ -angle }deg)`);
        }

        createNameList();
        btn.addEventListener('click', run);

    </script>

</body>
</html>